<template>
  <!-- 导航栏 -->
  <van-nav-bar title="申请退款" left-arrow @click-left="back" />
  <section class="aui-flexView">
    <!-- 订单详细 -->
    <section class="aui-scrollView">
      <!-- 订单状态 -->
      <div class="aui-pay-change">
        <div class="aui-flex">
          <div class="aui-flex-box">
            <h3>{{orderInfo.status_text}}</h3>
          </div>
          <div class="aui-pay-zfb">
            <img src="/assets/images/icon-zfb.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 订单商品 -->
      <div class="aui-commodity-bg"  v-for="item in orderInfo.product" :key="item.id" style="background: transparent">
        <div style="margin-bottom: 10px; background: #f5f5f5">
          <div class="aui-flex">
            <div class="aui-commodity-img">
                <img :src="item.product.thumbs_text" />
              </div>
            <div class="aui-flex-box">
              <h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
              <p>商品单价：￥{{ item.product.price }}</p>
              <span class="aui-barter-time">七天退换</span>
            </div>
            <div>
              <h5>￥{{ item.total }}</h5>
              <p class="aui-sml-text">X{{ item.pronum }}</p>
            </div>
          </div>

          <div v-if="item.status == 0" style="text-align: right">
            <van-button type="primary" size="mini"
              >评价
            </van-button>
          </div>
        </div>
      </div>

      <!-- 退款信息 -->
      <van-form @submit="submit">
        <van-cell-group inset>
          <van-field
            is-link
            readonly
            label="退款类型"
            placeholder="点击退款类型"
            @click="showStatus = true"
            v-model="result"
            :rules="[{ required: true, message: '请选择退款类型' }]"
          />
          <van-popup v-model:show="showStatus" position="bottom">
            <van-picker
                :columns="columns"
                @confirm="onConfirm"
                @cancel="showStatus = false"
            />
            </van-popup>
          <van-field
            rows="2"
            autosize
            label="退款原因"
            type="textarea"
            maxlength="50"
            placeholder="请输入退款原因"
            show-word-limit
            v-model="refundreason"
            :rules="[{ required: true, message: '请填写退款原因' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"> 提交 </van-button>
        </div>
      </van-form>
    </section>
  </section>
</template>

<script setup>
    const {proxy} = getCurrentInstance();
    const back = () => proxy.$router.push("/order/index");

    const showStatus = ref(false);
    const result = ref('');
    const columns = [
      { text: '仅退款', value: '-1' },
      { text: '退货退款', value: '-2' },
    ];
    const onConfirm = ({ selectedOptions }) => {
      result.value = selectedOptions[0]?.text;
      status = selectedOptions[0]?.value
      showStatus.value = false;
    };

    // 退款类型
    let status = "";
    // 退款原因
    let refundreason = ref("");

    onBeforeMount(()=>{
        getData()
    })

    // 发送请求，获得订单信息
    const userInfo = proxy.$cookies.get("business")?proxy.$cookies.get("business"):{};
    const orderid = proxy.$route.query.orderid?proxy.$route.query.orderid:0
    let orderInfo = ref({
    });
    const getData = async () => {
        let data = {
            busid:userInfo.id,
            orderid:orderid
        }
        let result = await proxy.$POST({
            url:"/business/refundIndex",
            params:data
        })
        if(result.code){
            orderInfo.value = result.data
            return false
        }else{
            proxy.$fail(result.msg);
            return false
        }
    }

    // 提交 
    const submit = async ()=>{
        proxy.$dialog({
            title:"提醒",
            message:"确认要提交吗?"
        }).then(async()=>{
            let data = {
                orderid,
                refundreason:refundreason.value,
                status
            }
            let result = await proxy.$POST({
                url:"/business/refund",
                params:data
            })
            if(result.code){
                proxy.$success({
                    message:result.msg,
                    duration:1000,
                    onClose:()=>{
                        proxy.$router.push('/order/index');
                        return false;
                    }
                })
            }
        }).catch(err=>{
            console.log(err)
        })
        
    }
</script>

<style>
    @import url("/assets/css/info.css");
</style>